<template>
  <div class="login_container">
    <div class="wlecome">
      <p>您好</p>
      <p>欢迎登入华润微服务</p>
    </div>

    <!-- 登入表单区域 -->
    <div class="login_form">
      <mt-field :state="phoneState" class="phone" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
      <mt-field :state="pwsState" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-button @click="login" class="login" type="primary">登入</mt-button>
    </div>

    <div class="more">
      <router-link to="/register">注册</router-link>
      <router-link to="/phonePage">找回密码</router-link>
    </div>

    <p id="pro" class="protocol">注册/登录即代表您已同意<span>《华润燃气用户协议》</span></p>
  </div>

</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      // 登录表单的数据
      phone: '18650445715',
      password: 'admin123',
      // 登入表单的格式状态
      phoneState: '',
      pwsState: ''
    }
  },
  created () {},
  methods: {
    // 点击登入按钮
    async login () {
      // 判断用户名和密码是否符合格式要求
      const isOk = this.phoneState === 'success' && this.pwsState === 'success'
      console.log(isOk)

      if (!isOk) {
        Toast({
          message: '用户名或密码格式不正确',
          position: 'middle',
          duration: 3000
        })
        return
      }
      // 拼接请求参数对象
      const loginForm = {
        phoneNumber: this.phone,
        password: this.password
      }

      // 发送登入请求
      const { data: res } = await this.$http.post('login', loginForm)
      console.log(res)
      if (res.code !== 0) {
        Toast({
          messsage: res.msg,
          positon: 'middel',
          duration: 3000
        })
        return
      }
      Toast({ message: '登入成功！', position: 'middel', duration: 3000 })
      window.sessionStorage.setItem('token', res.data)
      this.$router.push('/home')
    }
  },
  watch: {
    phone: function (newVal, oldVal) {
      const regPhone = /^1[3|4|5|7|8][0-9]{9}$/
      const istrue = regPhone.test(newVal)
      if (istrue) {
        this.phoneState = 'success'
      } else {
        this.phoneState = 'error'
      }
    },
    password: function (newVal, oldVal) {
      const length = newVal.trim().length
      if (length >= 8 && length <= 20) {
        this.pwsState = 'success'
      } else {
        this.pwsState = 'error'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .login_container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 65px 25px 10px;
  }
  // 欢迎块
  .wlecome p {
    font-family: 'Microsoft YaHei Bold', 'Microsoft YaHei';
    font-weight: 700;
    font-style: normal;
    margin: 0;
    color: #333333;
  }

  .wlecome p:nth-child(1) {
    font-size: 18px;
  }
  .wlecome P:nth-child(2) {
    font-size: 16px;
  }

  // 登入表单块
  .login_form {
    margin-top: 50px;

    /deep/ .mint-cell-wrapper {
      background-position: bottom;
    }

    /deep/ input {
      font-size: 13px;
    }

    /deep/ input::-webkit-input-placeholder {
      font-size: 13px;
      color: #CCCCCC;
    }
  }

  .login {
    margin-top: 20px;
    width: 100%;
    font-size: 14px;
    background-color: #F59E0E;
  }

  .more {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 200;
    margin-top: 15px;
  }

</style>
